<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    img{
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

<body>
    <img  src="./img.jpg" width="100" alt="">
</body>
<script>
    var sss = document.querySelector('img')
    var targetX=0
    // 距离目标
    var targetY=0
    var leaderX=0
    // 步长
    var leaderY=0
    // 事件源对象
    document.onclick = function (event) {
        // console.log('event.clientX='+event.clientX);
        // console.log('event.clientY='+event.clientY);
        // console.log('event.screenX='+event.screenX);
        // console.log('event.screenY='+event.screenY);
        // console.log('event.pageX='+event.pageX);
        // console.log('event.pageY='+event.pageY);
        // 兼容IE5,6,7,8
        event = event || window.event
        targetX = event.clientX - sss.offsetWidth / 2
        targetY = event.clientY - sss.offsetHeight / 2
    }

    function fn() {
        leaderX = leaderX + (targetX - leaderX) / 10
        leaderY = leaderY + (targetY - leaderY) / 10

        sss.style.left = leaderX + 'px'
        sss.style.top = leaderY + 'px'
    }
    setInterval(fn, 30)
</script>

</html>